<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div class="img">
    
   </div>
</body>
<script>
      //---------------------------------------------------
    //异步加载图片1
    function loadImageAsync(url){
         return new Promise(function(resolve,reject){
             const image = new Image();
             image.onload = function(){
                 resolve(image);
             }
             image.onerror = function(){
                 reject(new Error('Could not load image at'  + url))
                }
              image.src = url;
            }).then(function(value){
              document.querySelector('.img').appendChild(value)
            }).catch(function(err){
               console.log(err);
            })
     }
     loadImageAsync("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F155%2F108027%2F26eeb4c0acb7930a_1366x768.jpg&refer=http%3A%2F%2Fdik.img.kttpdq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630315980&t=bb8fdac114ee7f73a5be8a38c4d2a5f3")

     //----------------------------------------------------
     //异步加载图片2
     //实现图片加载
    function createImg(url) {
        // return new Promise((resolve, reject) => {
        //     if (url) {
        //         console.log(url);
        //         let ImgElement = document.createElement('img')
        //         ImgElement.src = url;
        //         console.log("imgElement"+ Object.prototype.toString.call(ImgElement))
        //         resolve(ImgElement);
        //     } else {
        //         reject("url is not right")
        //     }
        // })
        if(!url) {
            return ;
        }
        return new Promise((resolve, reject) => {
            if (url) {
                console.log(url);
                let ImgElement = document.createElement('img')
                ImgElement.src = url;
                console.log("imgElement"+ Object.prototype.toString.call(ImgElement))
                resolve(ImgElement);
            } else {
                reject("url is not right")
            }
        })
    }
    createImg("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdik.img.kttpdq.com%2Fpic%2F155%2F108027%2F26eeb4c0acb7930a_1366x768.jpg&refer=http%3A%2F%2Fdik.img.kttpdq.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630315980&t=bb8fdac114ee7f73a5be8a38c4d2a5f3").then((value) => {
        document.body.appendChild(value);
    }).catch((error)=>{
        alert(error);
    })

    //-----------------------------------------------------
    //异步加载图片3
    const preloadImage = function(path){
        return new Promise(function(resolve,reject){
            const image = new Image();
            image.onload = resolve;
            image.onerror = reject;
            image.src = path;
        })
    }
</script>
</html>